import { getLocalStorageWithAutoParse, messages } from "share/common";
import { PERSONNEL_DETAIL_COLUMNS, COMMON_REPORT_CONFIG } from "../constant";
import React from "react";
import Charts from "components/template/graphic-report/report-echarts";
import VScrollEchartsV2 from "components/template/graphic-report/vscroll-echarts";
import ReportTable from "components/template/graphic-report/report-table";
import ReportOverviewSimple from "components/template/graphic-report/report-overview-simple";
import PersonnelFeeReportService from "../report-private-service/personnel-fee-report.service";
import { commonUtilsFactory, toggleShowLabel } from "../echarts-data-transfer/utils";

const reportKeyPrefix = 'hly.reportLabel.10011.';
const expenseTendencyLabelKey = `${reportKeyPrefix}expenseTendencyReport`;
const expenseTypeLabelKey = `${reportKeyPrefix}expenseTypeReport`;

export default (context) => {
  let expenseTendencyShowLabel = getLocalStorageWithAutoParse(expenseTendencyLabelKey);
  if (expenseTendencyShowLabel === undefined) {
    expenseTendencyShowLabel = true;
  }

  let expenseTypeShowLabel = getLocalStorageWithAutoParse(expenseTypeLabelKey);
  if (expenseTypeShowLabel === undefined) {
    expenseTypeShowLabel = true;
  }


  return {
    personnelOverview: {  // 只做数据获取，不展示内容，内容展示在趋势表的utils区域
      title: messages('finance-7.key171')/*报表概览*/,
      isLoading: false,
      fetchMethod: PersonnelFeeReportService.getBaseAmount,
      options: [{
        title: messages('finance-7.key194')/*总报销金额*/,
        detail: 0
      }],
      render: ({ config }) => {
        return <div></div>
      }
    },
    expenseTendencyReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key198')/*费用总体趋势报表*/,
      fetchMethod: PersonnelFeeReportService.getExpenseAnalysisReport,
      showLabel: expenseTendencyShowLabel,
      activeConfig: {
        key: 'filterYearMonths',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData, reportConfig } = context.state;
        let { isLoading, options, dataLength, title } = config;
        const { personnelOverview = {} } = (reportConfig || {});
        const { options: personnelOverviewOptions = [] } = personnelOverview;
        const utils = (
          <div className='report-utils-wrapper'>
            <div className='utils-title'>
              <span className='utils-title-label'>{personnelOverviewOptions[0].title}</span>{personnelOverviewOptions[0].detail}
            </div>
            {commonUtilsFactory({ context, reportType, config, reportKeyPrefix })}
          </div>
        );
        options = toggleShowLabel({ config, options });
        return (
          <Charts
            allowActivated
            title={title}
            cols={24}
            utils={utils}
            dataLength={dataLength}
            options={options}
            reportKey='expenseTendencyReport'
            reportType='tendency'
            isFetchingData={isFetchingData}
            loading={isLoading}
            compareKey='monthName'
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        )
      }
    },
    expenseTypeReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key199')/*费用类型分析*/,
      fetchMethod: PersonnelFeeReportService.getReportDetailExpenseType,
      showLabel: expenseTypeShowLabel,
      activeConfig: {
        key: 'filterExpenseTypeIds',
        array: true
      },
      render: ({ config, context, reportType }) => {
        let { isFetchingData } = context.state;
        let { isLoading, options, dataLength, title } = config;

        const utils = commonUtilsFactory({ context, reportType, config, reportKeyPrefix });
        options = toggleShowLabel({ config, options });
        return (
          <VScrollEchartsV2
            allowActivated
            title={title}
            dataLength={dataLength}
            options={options}
            cols={12}
            utils={utils}
            reportKey='expenseTypeReport'
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        )
      }
    },
    statusAmountReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key197')/*报销状态占比*/,
      fetchMethod: PersonnelFeeReportService.getReportDetailReportStatus,
      activeConfig: {
        key: 'filterStatus',
        array: true
      },
      render: ({ config, context }) => {
        let { isFetchingData } = context.state;
        const { isLoading, options, dataLength, title } = config;
        return (
          <Charts
            allowActivated
            title={title}
            cols={12}
            dataLength={dataLength}
            options={options}
            reportKey='statusAmountReport'
            reportType='pie'
            isFetchingData={isFetchingData}
            loading={isLoading}
            onActivatedItemChange={context.onChartClick}
            onRef={context.onMountCharts}
          />
        )
      }
    },
    userDetailExpenseReport: {
      ...COMMON_REPORT_CONFIG,
      title: messages('finance-7.key202')/*人员费用明细*/,
      fetchMethod: PersonnelFeeReportService.getReportDetailUserDetailExpense,
      isTable: true,
      columns: PERSONNEL_DETAIL_COLUMNS,
      render: ({ config, context }) => {
        return (
          <ReportTable
            title={config.title}
            cols={24}
            columns={config.columns}
            fetchMethod={config.fetchMethod}
            onRef={context.onMountCharts}
            dataLength={1}
            reportKey='userDetailExpenseReport'
          />
        )
      }
    },
  }
}
